Vue.use(VueResource)

//  广场社区每一条帖子内容
var communityItemComponent = Vue.extend({
  template: '#community-item',
  data: function() {
    return {

    }
  },
  props: ['item']
})

//  广场社区发帖
var CommunityPublishComponent = Vue.extend({
  template: '#community-publish',
  data: function() {
    return {
      post: {
        title: '',
        content: ''
      },
      user: {
        name: '',
        id: ''
      }
    }
  },
  mounted: function() {
    var user = localStorage.memoryClassUser
    if (user) {
      this.user = JSON.parse(user)
    }
  },
  methods: {
    publishPost: function() {
      var post = this.post
      var user = this.user

      if (!this.trim(post.title) || !this.trim(post.content)) {
        return $$.alert('请输入完整')
      }
      if (user.id && user.id != -1) {
        this.$http.post('/post', {
          handler: user,
          title: post.title,
          content: post.content
        }).then(function(res) {
          if (res.data.code == 100) {
            $$.alert('发表成功')
              // this.$emit('publish-new-post', res.data.data.post)
              // this.post = {
              //   title: '',
              //   content: ''
              // }
            setTimeout(function() {
              location.reload()
            }, 1000)
          } else {
            $$.alert(res.data.msg)
          }
        })
      } else {
        return $$.alert('请登录')
      }

    },
    trim: function(str) {
      return str.replace(/(^\s+)|(\s+$)/g, '')
    }
  }

})

//  广场社区
var communityComponent = Vue.extend({
  template: '#community',
  data: function() {
    return {
      list: [],
      page: 1
    }
  },
  methods: {
    getPostList: function(page) {
      this.$http.get('/post/page/' + page).then(function(res) {
        if (res.data.code == 100) {
          this.list = res.data.data.list
          this.page = page
        } else if (res.data.code != 112) {

          $$.alert(res.data.msg)
        }
      })
    },
    changePage: function(num) {
      this.getPostList(this.page + num)
    },
    addNewPost: function(post) {
      this.list.unshift(post)
      this.list.length = this.list.length > 10 ? 10 : this.list.length
    }
  },
  mounted: function() {
    this.getPostList(1)
  },
  components: {
    'community-item-component': communityItemComponent,
    'community-publish-component': CommunityPublishComponent
  }
})

//  最新动态
var newActiveComponent = Vue.extend({
  template: '#newActive',
  data: function() {
    return {
      list: [],
      page: 1,
      classTypes: ['color-blue', 'color-green', 'color-red', 'color-orange']
    }
  },
  mounted: function() {
    this.getActiveList(0)
  },
  methods: {
    getActiveList: function(skip) {
      this.$http.get('/active?page=' + (this.page + skip)).then(function(res) {
        if (res.data.code == 100) {
          this.list = res.data.data.list
          this.page += skip
        } else if (res.data.code == 112) {

        } else {
          console.log(res.data.msg)
        }
      })
    }
  }
})

//  吐槽墙一条li组件
var spitListItemComponent = Vue.extend({
  template: '#spitListItem',
  data: function() {
    return {

    }
  },
  props: ['item']
})

//  吐槽墙
var spitComponent = Vue.extend({
  template: '#spit',
  data: function() {
    return {
      user: {
        name: '',
        id: ''
      },
      list: [],
      socket: null,
      //  窗口改变属性
      bigBox: false,
      smallStyle: {
        width: 0,
        height: 0,
        left: 0,
        top: 0
      },
      changeBigStyle: {
        left: 0,
        top: 0,
        width: window.innerWidth,
        height: window.innerHeight,
      },
      spitInfo: ''
    }
  },
  computed: {

  },
  mounted: function() {

    var user = localStorage.memoryClassUser
    if (user) {
      this.logined = true
      this.user = JSON.parse(user)
    }
    var socket = io.connect('http://' + location.host + '/spit')

    this.socket = socket

    //  接收数据列表
    socket.on('spit list', function(data) {
        this.list = data.list
      }.bind(this))
      //  禁言
    socket.on('stop spit', function(data) {
        $$.alert(data.msg)
      })
      //  接收新通知
    socket.on('new spit', function(data) {
      console.log(data)
      this.list.push(data)
    }.bind(this))

  },
  methods: {
    //  变大屏和还原，以后会改成css3 实现
    changeScreen: function() {
      if (this.bigBox) {
        this.bigBox = false
        $('.spit').animate(this.smallStyle, 500, function() {
          $('.spit').css({
            position: 'relative',
            left: 0,
            top: 0
          })
        })
      } else {
        var styleObj
        this.bigBox = true
        var $spit = $('.spit')
        this.smallStyle = styleObj = {
          width: $spit.width(),
          height: $spit.height(),
          top: $spit.offset().top,
          left: $spit.offset().left
        }
        this.changeBigStyle.width = window.innerWidth
        this.changeBigStyle.height = window.innerHeight

        $('.spit').css({
          position: 'fixed',
          left: styleObj.left,
          top: styleObj.top
        }).animate(this.changeBigStyle, 500)
      }

    },
    //  发送消息
    newSpit: function() {
      var news = this.spitInfo
      var socket = this.socket
      var userInfo = this.user

      if (!userInfo.name) {
        this.user = userInfo = {
          name: '游客' + Math.random().toString().slice(-5),
          id: -1
        }
        localStorage.memoryClassUser = JSON.stringify(userInfo)
      }
      if (!news.length) {
        return $$.alert('请填写吐槽内容')
      }

      var safePatt = /<\s*((script)|(img)|(a)|(link)|(iframe)|(frameset))\s*>/

      if (safePatt.test(news)) {
        socket.emit('illegal', {
          handler: userInfo
        })
        return $$.alert('有违规内容，禁言1分钟！')
      } else {
        socket.emit('new spit', {
          handler: userInfo,
          content: news
        })
        this.spitInfo = ''
      }
    }
  },
  components: {
    'spit-list-item-component': spitListItemComponent
  }
})



new Vue({
  el: '#app',
  data: {
    logined: false,
    adminId: '',
    userInfo: {
      name: '',
      id: ''
    },
    testTypes: ['IT知识', '生活常识', '问卷调查'],
    list: [],
    page: 1
  },
  mounted: function() {
    var user = localStorage.memoryClassUser
    if (user) {
      this.logined = true
      this.userInfo = JSON.parse(user)
    }
    informHandler.start('网站管理员火热报名中...')


  },
  methods: {

  },
  components: {
    'spit-component': spitComponent,
    'new-active-component': newActiveComponent,
    'community-component': communityComponent
  }
})